<template>
	<div id="microserve">
		<el-table
			v-if="serves"
			ref="table"
			:data="serves"
			style="width: 100%"
			highlight-current-row
    		@current-change="edit"
			:row-class-name="tableRowClassName">
			<el-table-column
			prop="a"
			label="部位"
			mix-width="180">
				<template scope="filed">
					<span v-text="filed.row.a"></span>
				</template>
			</el-table-column>
			<el-table-column
			prop="b"
			label="病变程度"
			width="180">
				<template scope="filed">
					<wt-select 
						v-model="filed.row.b" 
						:multiple="false" 
						v-if="filed.row.editing"
						:options="options_1" 
					></wt-select>
					<span v-text="options_1.find(s => s.value == filed.row.b) && options_1.find(s => s.value == filed.row.b).label" v-else></span>
				</template>
			</el-table-column>
			<el-table-column
			prop="c"
			label="处理方式"
			width="180">
				<template scope="filed">
					<wt-select 
						v-model="filed.row.c" 
						:multiple="false" 
						v-if="filed.row.editing"
						:options="options_2" 
					></wt-select>
					<span v-text="options_2.find(s => s.value == filed.row.c) && options_2.find(s => s.value == filed.row.c).label" v-else></span>
				</template>
			</el-table-column>
			<el-table-column
			prop="d"
			label="材料"
			width="180">
				<template scope="filed">
					<wt-select 
						v-model="filed.row.d" 
						:multiple="false" 
						 v-if="filed.row.editing"
						:options="options_3" 
					></wt-select>
					<span v-text="options_3.find(s => s.value == filed.row.d) && options_3.find(s => s.value == filed.row.d).label" v-else></span>
				</template>
			</el-table-column>
			<el-table-column
			prop="e"
			label="直径">
				<template scope="filed">
					<el-input v-if="filed.row.editing" v-model="filed.row.e" placeholder="comment"></el-input>
					<span v-text="filed.row.e" v-else></span>
				</template>
			</el-table-column>
			<el-table-column
			prop="f"
			label="长度">
				<template scope="filed">
					<el-input v-if="filed.row.editing" v-model="filed.row.f" placeholder="comment"></el-input>
					<span v-text="filed.row.f" v-else></span>
				</template>
			</el-table-column>
			<el-table-column
			prop="g"
			label="厂家">
				<template scope="filed">
					<el-input v-if="filed.row.editing" v-model="filed.row.g" placeholder="comment"></el-input>
					<span v-text="filed.row.g" v-else></span>
				</template>
			</el-table-column>
		</el-table>
		<!-- <el-button class="button-new-tag" size="small" @click="addOptions">+ New Service</el-button> -->
		<!-- <el-button @click="save" :loading="loading">保存</el-button> -->
	</div>
</template>
<script>
import request from "winged/utils/axios";
import wtSelect from "winged/components/wt-select.vue";
import utils from "winged/utils/utils.js";
export default {
	name: "dynamic-form",
	props: {
		field: {
			type: Object,
			default: function() {
				return {};
			}
		},
		form: {
			type: Object,
			default: function() {
				return {};
			}
		}
	},
	data() {
		return {
			serves: [],
			options_1: [
				{
					label: "轻度狭窄",
					value: "1"
				},
				{
					label: "中度狭窄",
					value: "2"
				},
				{
					label: "重度狭窄",
					value: "3"
				},
				{
					label: "动脉瘤或夹层",
					value: "4"
				}
			],
			options_2: [
				{
					label: "球囊拓展",
					value: "1"
				},
				{
					label: "支架植入",
					value: "2"
				},
				{
					label: "搭桥手术",
					value: "3"
				}
			],
			options_3: [
				{
					label: "球囊",
					value: "1"
				},
				{
					label: "支架",
					value: "2"
				},
				{
					label: "人工血管",
					value: "3"
				},
				{
					label: "大隐静脉",
					value: "4"
				}
			],
			value: "",
			currentRow: "",
			loading: false,
			dependingField: this.form[this.field.dependingField.name]
		};
	},
	components: {
		[[wtSelect.name]]: wtSelect
	},
	methods: {
		// get_micro_services(){
		// 	request('uaa/config/get_micro_services', 'post', {data:'{}'}, true, response => {
		// 		if(typeof(response) == 'string'){
		// 			response = JSON.parse(response)
		// 		}
		// 		response.micro_services.forEach((item,index) => {
		// 			item.index = index
		// 			item.editing = false
		// 		})
		// 		this.serves = response.micro_services
		// 	}, err => {
		// 		console.log('err-get_micro_services',err)
		// 		this.$message('获取失败！')
		// 	}, false)
		// },
		edit: function(row, oldRow) {
			if (row) {
				row.editing = true;
			}
			if (oldRow) {
				oldRow.editing = false;
			}
			this.currentRow = row;
		},
		// save:function(){
		// 	this.loading = true
		// 	this.isEditing = false
		// 	let message = this.checkField('slug')
		// 	if(message){
		// 		this.loading = false
		// 		return
		// 	}
		// 	request('uaa/config/update_micro_services', 'post', {data:JSON.stringify({micro_services:this.serves})}, true, response => {
		// 		this.$message('保存成功！')
		// 		this.loading = false
		// 	}, err => {
		// 		console.log('err',err)
		// 		this.$message('保存失败！')
		// 		this.loading = false
		// 	}, false)
		// },
		// onDelete:function(row){
		// 	if(row.newServe){//如果搞删除的服务尚未保存到数据库，则不继续
		// 		let index = this.serves.indexOf(row)
		// 		this.serves.splice(index, 1);
		// 		return
		// 	}
		// 	this.$confirm('此操作将从数据库中删除该服务, 是否继续?', '提示', {
		// 		confirmButtonText: '确定',
		// 		cancelButtonText: '取消',
		// 		type: 'warning'
		// 	}).then(() => {
		// 		let index = this.serves.indexOf(row)
		// 		this.serves.splice(index, 1);
		// 		//从数据库中删除
		// 		request('uaa/config/delete_micro_services', 'post', {data:JSON.stringify({micro_services:[{slug:row.slug}]})}, true, response => {
		// 			this.$message('删除成功！')
		// 		}, err => {
		// 			console.log('err',err)
		// 			this.$message('删除失败, 该项已重新添加回表格中！')
		// 			this.serves.splice(index, 0, row);
		// 		}, false)
		// 	})

		// },
		addOptions: function(id, name) {
			console.log("name", name);
			this.serves.push({
				index: this.serves.length,
				id: id,
				a: name,
				b: "",
				c: "",
				d: "",
				e: "",
				f: "",
				g: "",
				editing: false,
				newServe: true
			});
			//注意：这里设置一定延时，是防止在created钩子中注册的click事件吧editing状态改回false
			setTimeout(_ => {
				//聚焦到新加的表各行，并使其进入编辑状态，即：editing设为true
				this.$refs.table.setCurrentRow(
					this.serves[this.serves.length - 1]
				);
			}, 20);
		},
		// //保存前的检查
		// checkField(key){
		// 	//唯一性检查
		// 	for(var i = 0, len = this.serves.length; i<len;i++){
		// 		if(this.serves[i].slug == '' || this.serves[i].name == ''){
		// 			this.$message('slug或name不能为空')
		// 			return true
		// 		}
		// 		for(var j = i + 1; j < len; j++){
		// 			if(this.serves[i][key] === this.serves[j][key]){
		// 				this.$message('slug：' + this.serves[j][key] + '已经存在')
		// 				return true
		// 			}
		// 		}
		// 	}
		// 	return false
		// },
		tableRowClassName(row, index) {
			if (index === 1) {
				return "info-row";
			} else if (index === 3) {
				return "positive-row";
			}
			return "";
		}
	},
	watch: {
		"form.position": {
			handler: function(val) {
				val.forEach(item => {
					let index = this.serves.findIndex(
						serve => serve.id == item
					);
					if (index > -1) {
					} else {
						console.log(this.form.myOptions);
						let option = this.form.myOptions.find(
							it => it.value == item
						);
						this.addOptions(option.value, option.label);
					}
				});
				this.serves.forEach(item => {
					let index = val.findIndex(s => s == item.id);
					console.log("delete", index);
					if (index > -1) {
					} else {
						console.log(item.a);
						this.serves.splice(
							this.serves.findIndex(s => s.id == item.id),
							1
						);
					}
				});
			},
			deep: false,
			immediate: true
		}
	},
	created() {
		//this.get_micro_services()
		window.addEventListener("click", e => {
			let eventPath = e.path.reverse(); //el-table__body-wrapper el-table__body
			console.log(eventPath);
			if (
				eventPath.length < 22 ||
				(eventPath[21] &&
					eventPath[21].className != "el-table__body-wrapper")
			) {
				this.currentRow && (this.currentRow.editing = false);
				//取消选中表格行
				this.$refs.table.setCurrentRow();
			}
		});
	}
};
</script>
<style lang="less">
#microserve {
	.el-checkbox-group {
		width: 100%;
		display: inline-block;
	}
	.edit {
		padding: 5px 7px !important;
	}
	.el-tag {
		height: auto;
		width: 100%;
		padding: 0 30px 0 0;
		margin-bottom: 4px;
		.el-input {
			width: 25%;
		}
	}
	.el-table {
		margin-bottom: 10px;
		.info-row {
			background: #c9e5f5;
		}
		.positive-row {
			background: #e2f0e4;
		}
	}
}
</style>